<template>
  <div class="logisticslist">
    <div class="list" :class="isIOS ? 'padding-b-220' : 'padding-b-180'">
      <template v-for="item in list" :key="item.id">
        <logistic-item ref="logisticItemRef" :item-data="item"></logistic-item>
      </template>
    </div>

    <div class="bottom">
      <div class="action">
        <button v-if="list.length > 0" class="action-btn" @click="handleSave">保存设置</button>
        <button v-else class="action-btn" @click="handleRouteJump('/addressmanage')">
          新增自提点
        </button>
      </div>
      <i v-if="isIOS" class="toolman"></i>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import type { ZiTiParm } from '@/api/order/MangeModel'
  import LogisticItem from './logistic-item.vue'
  import { judgeClient } from '@/utils/utils'
  import { getZiTiListApi } from '@/api/order/index'
  import { useRouter } from 'vue-router'
  import { ref } from 'vue'
  const { isIOS } = judgeClient()

  // ------ router
  const router = useRouter()

  // ------ data
  const logisticItemRef = ref<InstanceType<typeof LogisticItem>>()
  const list = ref<ZiTiParm[]>([])
  const count = ref<number>(0)

  // ------ methods
  const handleSave = () => {
    const logisticIdArr = []

    if (logisticItemRef.value instanceof Array) {
      for (const item of logisticItemRef.value) {
        item.checkedItemCpt.isChecked && logisticIdArr.push(item.checkedItemCpt.id)
      }
    }

    window.localStorage.setItem('logisticIdArr', JSON.stringify(logisticIdArr))
    router.back()
  }
  const handleRouteJump = (path: string) => {
    router.push({
      path,
      query: {
        flag: '1'
      }
    })
  }

  // ------ request
  async function getZiTiList() {
    const res = await getZiTiListApi({ page: 1, pagesize: 99999 })
    if (res.code == 0) {
      list.value = res.result.list
      count.value = res.result.count
    }
  }

  // ------ init
  function init() {
    getZiTiList()
  }
  init()
</script>

<style lang="scss" scoped>
  .logisticslist {
    position: relative;
    height: 100vh;
    overflow: auto;

    .list {
      box-sizing: border-box;
      height: 100%;
      overflow: auto;
      padding: 0 30px;
    }

    .bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;

      .action {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 112px;
        background: #ffffff;

        .action-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          border: none;
          width: 630px;
          height: 90px;
          background: linear-gradient(90deg, #3ebd33 0%, #9fdf4f 100%);
          box-shadow: 0px 10px 20px 0px rgba(105, 194, 97, 0.27);
          border-radius: 45px;
          font-size: 30px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
        }
      }

      .toolman {
        display: block;
        width: 100%;
        height: 68px;
        background: #ffffff;
      }
    }

    .padding-b-180 {
      padding-bottom: 180px;
    }
    .padding-b-220 {
      padding-bottom: 220px;
    }
  }
</style>
